<template>
    <div class="account-pages">
        <div class="wrapper-page">
            <div class="wrapper-page-content am-flex am-flex-justify-between">
                <div class="wrapper-page-left am-flex-1 am-flex-width" :style="{backgroundImage: 'url(' + require('@/assets/images/newBg.png') + ')' }">
                </div>
                <div class="wrapper-page-right admin-login am-flex am-flex-col am-flex-items-center">
                    <div class="am-flex am-flex-col am-flex-items-center">
                        <p class="am-text-xl am-font-weight am-margin-bottom-xs">找回密码</p>
                    </div>

                    <div data-am-widget="tabs" class="am-tabs am-tabs-border am-margin-bottom-0 am-margin-left-0 am-margin-right-0 am-no-layout" data-am-tabs="{noSwipe: 1}">
                        <div class="am-tabs-bd">
                            <div>
                                <el-form ref="form" :model="form" :rules="registerRules" class="register-form" :style="{'width':this.isPhone ? '300px': ''}">
                                    <el-form-item prop="phoneNumber">
                                        <el-input v-model="form.phoneNumber" type="text" auto-complete="off" placeholder="手机号码">
                                            <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="password">
                                        <el-input
                                            v-model="form.password"
                                            type="password"
                                            auto-complete="off"
                                            placeholder="请输入新密码">
                                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="confirmPassword">
                                        <el-input
                                            v-model="form.confirmPassword"
                                            type="password"
                                            auto-complete="off"
                                            placeholder="确认新密码">
                                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                                        </el-input>
                                    </el-form-item>


                                    <el-form-item prop="code">
                                        <el-input v-model="form.code"
                                                  auto-complete="off"
                                                  placeholder="输入验证码"
                                                  style="width: 63%"
                                                  @keyup.enter.native="submitForm">
                                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                                        </el-input>
                                        <div class="register-code">
                                            <el-button type="primary" plain :disabled="!phoneCodeStatus" @click="this.getCode" style="text-align: center">
                                                <span v-show="phoneCodeStatus">验证码</span>
                                                <span v-show="!phoneCodeStatus">{{countdownTime}}秒</span>
                                            </el-button>
                                        </div>
                                    </el-form-item>

                                    <el-form-item style="width:100%;">
                                        <el-button
                                            :loading="loading"
                                            size="medium"
                                            type="primary"
                                            style="width:100%;"
                                            @click.native.prevent="submitForm"
                                        >
                                            <span v-if="!loading">确 定</span>
                                            <span v-else>处 理 中...</span>
                                        </el-button>
                                        <div style="float: right;">
                                            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
                                        </div>
                                    </el-form-item>
                                </el-form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  底部  -->
        <div class="el-login-footer">
            <a href="https://beian.miit.gov.cn">版权所有 湛江佳德科技有限公司 粤ICP备18102589号</a>
        </div>
    </div>
</template>

<script>
import { forgetPassword, getCode } from "@/api/login"

export default {
    name: "ForgetPassword",
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.form.password !== value) {
                callback(new Error("两次输入的密码不一致"))
            } else {
                callback()
            }
        }
        return {
            countdownTime: null,
            phoneCodeStatus: true,
            codeUrl: "",
            form: {
                // username: "",
                password: "",
                confirmPassword: "",
                phoneNumber: null,
                code: null
            },
            registerRules: {
                // username: [
                //   { required: true, trigger: "blur", message: "请输入您的账号" },
                //   { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
                // ],
                password: [
                    { required: true, trigger: "blur", message: "请输入您的密码" },
                    // { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, trigger: "blur", message: "请再次输入您的密码" },
                    { required: true, validator: equalToPassword, trigger: "blur" }
                ],
                phoneNumber: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入11位长度的手机号码', trigger: 'blur' },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: '请输入正确的手机号码'
                    }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: "blur" }
                ]
            },
            loading: false,
            isPhone: false
        }
    },
    created() {

        this.isPhone = this._isMobile()

    },
    methods: {


        _isMobile() {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
        },

        // 获取手机验证码
        getCode() {
            let pattern = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
            if (pattern.test(this.form.phoneNumber)) {
                getCode(this.form.phoneNumber).then(response => {
                    if (response.code === 200) {
                        this.$message.success("发送成功")

                        this.phoneCodeStatus = false
                        // 30秒
                        this.countdownTime = 30
                        const timeInterval = setInterval(() => {
                            this.countdownTime--
                            if (this.countdownTime <= 0) {
                                this.phoneCodeStatus = true
                                clearInterval(timeInterval)
                            }
                        }, 1000)
                    }
                    // if (response.code === 600) {
                    //   this.$message.error("1")
                    // }
                }, error => {})
            } else {
                this.$message.error("请输入正确的手机号")
            }
        },
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true
                    this.form.code = Number(this.form.code)
                    forgetPassword(this.form).then(response => {
                        if (response.code === 200) {
                            this.$message.success("找回密码成功")
                            this.$router.push("/login")
                        }

                    }).catch(() => {
                        this.loading = false
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss">
.account-pages {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 99;
    height: 100%;
    width: 100%;
}
.wrapper-page {
    margin: auto;
    position: absolute;
    max-width: 112rem;
    width: 100%;
    padding: 0 2rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .wrapper-page-content {
        background-color: #fff;
        box-shadow: 0.1rem 0.2rem 0.9rem 0rem rgba(0, 140, 255, 0.3);
        border-radius: 2rem;
        overflow: hidden;
        height: 48.3rem;
    }
    .am-flex-justify-between {
        justify-content: space-between;
    }
    .am-flex {
        display: flex !important;
    }
}
.wrapper-page-left {
    max-width: 57rem;
    width: 100%;
    background-size: auto 100%;
    padding: 4.4rem 4.5rem;
}
.am-flex-width {
    width: 0;
}
.am-flex-1 {
    flex: 1;
}
@media only screen and (min-width: 641px) {
    .admin-login {
        max-width: 36rem;
    }
}
@media only screen and (min-width: 641px) {
    .wrapper-page-right {
        padding: 2rem;
    }
}
.wrapper-page-right {
    margin: 6rem auto 0 auto;
}
.am-flex-items-center {
    align-items: center;
}
.am-flex-col {
    display: flex !important;
    flex-direction: column;
}
.am-flex {
    display: flex !important;
}
.am-font-weight {
    font-weight: 500;
}
.am-text-xl {
    font-size: 2.4rem;
}
.am-margin-bottom-xs {
    margin-bottom: 0.5rem;
}
.am-color-666 {
    color: #666;
}
.am-text-lg {
    font-size: 1.8rem;
}
.am-margin-right-0 {
    margin-right: 0 !important;
}
.am-margin-left-0 {
    margin-left: 0 !important;
}
.am-margin-bottom-0 {
    margin-bottom: 0 !important;
}
[data-am-widget='tabs'] {
    margin: 1rem;
}
.am-tabs-border>.am-tabs-bd {
    padding: 0 1.2rem;
}
.wrapper-page .am-tabs-bd {
    border: 0;
    padding: 0 !important;
}
.am-tabs-bd {
    position: relative;
    overflow: hidden;
    border: 0.1rem solid rgba(0, 0, 0, .06);
    z-index: 100;
    -webkit-transition: height .3s;
    transition: height .3s;
}



.register-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;
    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}
.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: black;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
</style>
